<template>
  <div>
    <insert-good-category-dialog v-model="dialogVisible" :parent-id="parentId" @change="freshTree"/>
    <el-row :gutter="16">
      <el-col :span="11">
        <el-card class="card">
          <div slot="header">
            <el-row :gutter="16">
              <el-col :span="6">
                <span style="margin-top: 9px; display: block">商品分类树</span>
              </el-col>
              <!--suppress HtmlDeprecatedAttribute -->
              <el-col :span="18" align="right">
                <el-button type="text" :loading="queryLoading" @click="handleRefreshTree">刷新</el-button>
                <el-button type="text" @click="handleAddRootNode">添加根节点</el-button>
              </el-col>
            </el-row>
          </div>
          <el-scrollbar style="height: 500px">
            <el-tree :data="treeData" :props=" { children: 'children', label: 'name' }" ref="tree"
                     @node-click="handleNodeClick" v-loading="queryLoading" :expand-on-click-node="false"
                     @current-change="currentChange" :check-on-click-node="true">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <el-button type="text" size="mini"  @click="() => addSonNode(data)">
                    添加子节点
                  </el-button>
                  <el-button type="text" style="color: red" size="mini" @click="() => removeNode(node, data)">
                    移除本节点
                  </el-button>
                  <el-button type="text" style="color: red" size="mini" @click="() => removeAllNode(node, data)">
                    移除子节点
                  </el-button>
                </span>
              </span>
            </el-tree>
          </el-scrollbar>
        </el-card>
      </el-col>
      <el-col :span="13">
        <el-card class="card">
          <div slot="header">
            <span>节点设置</span>
          </div>
          <el-scrollbar style="height: 500px">
            <el-form ref="form" :model="selectNode" label-width="80px" class="form" :rules="formRuler">
              <el-form-item prop="id" label="分类编号">
                <el-input v-model="selectNode['id']" placeholder="placeholder" :disabled="true"/>
              </el-form-item>
              <el-form-item prop="name" label="分类名称">
                <el-input v-model="selectNode['name']" placeholder="分类名称"/>
              </el-form-item>
              <el-form-item prop="description" label="分类描述">
                <el-input type="textarea" v-model="selectNode['description']" placeholder="分类描述信息"/>
              </el-form-item>
              <el-form-item prop="remark" label="分类备注">
                <el-input v-model="selectNode['remark']" placeholder="分类备注信息"/>
              </el-form-item>
              <el-row :gutter="40">
                <!--suppress HtmlDeprecatedAttribute -->
                <el-col :span="24" align="right">
                  <el-button @click="handleChangeGoodGroup" type="primary" :disabled="!isSelect"
                             :loading="submitLoading">更新</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ResultCode } from '@/constants/constants'
import GoodCategoryUpdateDTO from '@/api/entity/GoodCategoryUpdateDTO'
import InsertGoodCategoryDialog from '@pages/goods/part/pageGoodCategory/InsertGoodCategoryDialog'
import {
  queryGoodCategoryTree,
  removeGoodCategoryAllById,
  removeGoodCategoryById,
  updateGoodCategory
} from '@/api/ApiSysGoodCategory'

export default {
  name: 'PageGoodCategory',
  components: { InsertGoodCategoryDialog },
  data () {
    return {
      queryLoading: false,
      submitLoading: false,
      treeData: [],
      selectNode: {
        parentId: '',
        id: '',
        name: '',
        description: '',
        remark: ''
      },
      formRuler: {
        name: [{
          required: true,
          message: '分类名称不能为空',
          trigger: 'blur'
        }, {
          max: 32,
          message: '分类名称不应超过32个字符',
          trigger: 'blur'
        }],
        description: [{
          max: 64,
          message: '分类描述不应超过64个字符',
          trigger: 'blur'
        }],
        remark: [{
          max: 32,
          message: '分类备注信息不应超过32个字符',
          trigger: 'blur'
        }]
      },
      dialogVisible: false,
      parentId: 0
    }
  },
  computed: {
    loading () {
      return this.queryLoading
    },
    isSelect () {
      return this.selectNode && this.selectNode['id'] > 0
    }
  },
  methods: {
    /**
     * 树点击
     */
    handleNodeClick (data) {

    },
    /**
     * 数据处理，处理树形结构的商品分类
     */
    dealWithCategory (node) {
      if (node) {
        Object.assign(node, node.node)
        if (node.children) {
          node.children.forEach(this.dealWithCategory)
        }
      }
    },
    /**
     * 更新树
     */
    freshTree () {
      if (this.queryLoading) {
        return
      }
      this.queryLoading = true
      queryGoodCategoryTree(data => {
        if (data && data.code === ResultCode.OK) {
          const rootList = data.object.children
          rootList.forEach(this.dealWithCategory)
          this.treeData = rootList
        }
      }, () => {
        this.queryLoading = false
      })
    },
    /**
     * 刷新按钮点击事件
     */
    handleRefreshTree () {
      this.freshTree()
    },
    /**
     * 树当前选择节点改变
     * @param data 当前节点数据
     */
    currentChange (data) {
      this.selectNode = data
    },
    /**
     * 更新商品分数信息
     */
    handleChangeGoodGroup () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (!this.selectNode['id'] || this.selectNode['id'] < 0) {
            return
          }
          this.submitLoading = true
          const params = GoodCategoryUpdateDTO.instance()
          params.setId(this.selectNode.id)
          params.setName(this.selectNode.name)
          params.setDescription(this.selectNode.description)
          params.setRemark(this.selectNode.remark)
          updateGoodCategory(params, data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('更新数据成功')
              this.freshTree()
            }
          }, () => {
            this.submitLoading = false
          })
        }
      })
    },
    /**
     * 添加跟节点
     */
    handleAddRootNode () {
      this.parentId = 0
      this.dialogVisible = true
    },
    /**
     * 添加子节点
     */
    addSonNode (data) {
      this.parentId = data.id
      this.dialogVisible = true
    },
    /**
     * 移除当前节点
     * @param node 节点信息
     * @param data 当前节点数据，自己的数据
     */
    removeNode (node, data) {
      this.$confirm('你正在执行删除商品分类操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (data && data.id) {
          const id = data.id
          this.submitLoading = true
          removeGoodCategoryById(id, data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('移除成功')
              this.freshTree()
            }
          }, () => {
            this.submitLoading = false
          })
        }
      }).catch(() => {
      })
    },
    /**
     * 移除当前节点即子节点
     * @param node 节点信息
     * @param data 当前节点数据，自己的数据
     */
    removeAllNode (node, data) {
      this.$confirm('你正在执行删除商品分类操作，该操作会移除本节点即其所有子节点， 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (data && data.id) {
          const id = data.id
          this.submitLoading = true
          removeGoodCategoryAllById(id, data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('移除成功')
              this.freshTree()
            }
          }, () => {
            this.submitLoading = false
          })
        }
      }).catch(() => {
      })
    }
  },
  mounted () {
    this.freshTree()
  }
}
</script>

<style scoped>

  .card{
    height: 580px;
  }

  .form{
    padding: 8px 20px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 18px;
  }

</style>
